<template>
	<view class="pageV">
		<u-navbar title="商场" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view style="padding-bottom: 120rpx;">
			<u-swiper :list="bannerList" keyName="image" height="210" radius="0" imgMode="aspectFill"></u-swiper>
			<view class="tabV">
				<view class="tabVV">
					<image class="tabIv" src="https://s1.ax1x.com/2023/07/22/pCq1Gz8.png"></image>
					<view class="tabTv">单件包邮</view>
				</view>
				<view class="tabVV">
					<image class="tabIv" src="https://s1.ax1x.com/2023/07/22/pCq1dds.png"></image>
					<view class="tabTv">品质保证</view>
				</view>
				<view class="tabVV">
					<image class="tabIv" src="https://s1.ax1x.com/2023/07/22/pCq1NLQ.png"></image>
					<view class="tabTv">7天无忧退换货</view>
				</view>
			</view>

			<view class="fenleiV">
				<u-grid col="3">
					<u-grid-item v-for="(item,key) in fenLeiList" :key="key">
						<view class="fenleiItemV" @click="onItemTopClick(item)">
							<image class="fenleiItemIv" :src="item.image" mode="aspectFill"></image>
							<view class="fenleiItemTv">{{item.name}}</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>

			<view style="height: 30rpx;"></view>

			<view class="baoKuanV">
				<view class="tuijianTv">爆款推荐</view>
				<view class="tuijianV">
					<scroll-view style="overflow: hidden; vertical-align: middle; white-space: nowrap; height: 310rpx;"
						scroll-x="true">
						<view @click="onRecommendClick(tuiData)" class="tuijianItemV"
							v-for="(tuiData,tuiPos) in RecommendList" :key="tuiData">
							<image class="tuijianItemIv" :src="tuiData.image"></image>
							<view class="tuijianItemTv">{{tuiData.title}}
							</view>
							<view class="tuijianMoneyV">
								<view class="tuijianMoneyTv1">{{tuiData.sales_price}}</view>
								<view class="tuijianMoneyTv2">{{tuiData.market_price}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view style="height: 30rpx;"></view>

			<view style="padding-right: 10rpx; padding-left: 10rpx;">
				<u-grid col="2">
					<u-grid-item v-for="(item,key) in shopList" :key="key">
						<view class="itemV" @tap="onItemClick(item)">
							<image class="itemIv" :src="item.image" mode="aspectFill"></image>
							<view class="itemBottomV">
								<view class="itemTv">{{item.title}}</view>
								<view class="moneyV">
									<view class="moneyTv1">¥</view>
									<view class="moneyTv2">{{item.sales_price}}</view>
								</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="navigator">
			<view class="navigator-item" v-for="(item,index) in list" :key="item.pagePath"
				@click="switchTab(index,item)">
				<img :src="item.iconPath" class="icon" v-if="typePos !== index">
				<img :src="item.selectedIconPath" class="icon" v-else>
				<text :class="['item-text',{'text-active':typePos === index}]">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				bannerList: [],
				RecommendList: [], //推荐类表
				fenLeiList: [], //分类列表
				shopList: [], //商列表
				typePos: 0, // 
				list: [{
						"pagePath": "/shop/home/mall",
						"iconPath": "/static/tabbar/home.png",
						"selectedIconPath": "/static/tabbar/home_active.png",
						"text": "首页"
					}, {
						"pagePath": "/shop/home/sort",
						"iconPath": "/static/tabbar/fenlei.svg",
						"selectedIconPath": "/static/tabbar/schedule_active.png",
						"text": "分类"
					}, {
						"pagePath": "/shop/home/Shopping",
						"iconPath": "/static/tabbar/gouwu.svg",
						"selectedIconPath": "/static/tabbar/booking_active.png",
						"text": "购物车"
					},
					{
						"pagePath": "/shop/home/my",
						"iconPath": "/static/tabbar/me.png",
						"selectedIconPath": "/static/tabbar/me_active.png",
						"text": "我的"
					}
				]
			}
		},
		onLoad() {
			this.getShopRecommend();
			this.getShopBanner();
			this.getShopMenu();
			this.getGoodsList();
		},
		methods: {
			onItemTopClick(item) {
				this.$u.route({
					url: "/shop/home/sort",
					params: {
						id: item.id
					}
				})
			},
			getShopBanner() {
				this.$api.getShopBanner({}).then((res) => {
					this.bannerList = res
				}).catch((e) => {})
			},
			getShopRecommend() {
				this.$api.getShopRecommend({}).then((res) => {
					this.RecommendList = res;
				}).catch((e) => {})
			},
			getShopMenu() {
				this.$api.getShopMenu({}).then((res) => {
					this.fenLeiList = res;
				}).catch((e) => {})
			},
			getGoodsList() {
				this.$api.getGoodsList({}).then((res) => {
					this.shopList = res;
				}).catch((e) => {})
			},
			switchTab(index, item) {
				this.$u.route({
					url: item.pagePath,
				})
			},
			onRecommendClick(item) {
				this.$u.route({
					url: "/shop/commodity/details",
					params: {
						id: item.product_id
					}
				})
			},
			onItemClick(item) {
				this.$u.route({
					url: "/shop/commodity/details",
					params: {
						id: item.product_id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pageV {}

	.tabV {
		display: flex;
		padding-left: 33rpx;
		padding-right: 33rpx;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.tabVV {
		display: flex;
		align-items: center;
		justify-content: center;

		.tabIv {
			width: 30rpx;
			height: 30rpx;
		}

		.tabTv {
			font-size: 28rpx;
			color: #e8e8e8;
			margin-left: 11rpx;
		}
	}

	.itemV {
		width: 90%;
		background: #1F1F1F;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		padding-bottom: 10rpx;

		.itemIv {
			width: 100%;
			height: 330rpx;
			background-color: antiquewhite;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
		}

		.itemBottomV {
			margin-top: 10rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;

			.itemTv {
				width: 100%;
				font-size: 28rpx;
				color: #E8E8E8;
				color: #E8E8E8;
				display: -webkit-box;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}

			.moneyV {
				display: flex;
				align-items: baseline;
				margin-top: 10rpx;

				.moneyTv1 {
					font-size: 24rpx;
					color: #E6A5B4;
				}

				.moneyTv2 {
					font-size: 32rpx;
					color: #E6A5B4;
				}
			}
		}
	}

	.navigator {
		display: flex;
		background-color: #FFFFFF;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
	}

	.navigator-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		flex: 1;
		height: 100%;
	}

	.item-text {
		margin-top: 6rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.text-active {
		color: #666666 !important;
	}

	.icon {
		width: 20px;
		height: 20px;
	}

	.fenleiV {
		.fenleiItemV {
			width: 90%;
			height: 98rpx;
			border-radius: 10rpx;
			margin-bottom: 15rpx;
			position: relative;

			.fenleiItemIv {
				width: 100%;
				height: 98rpx;
				border-radius: 10rpx;
			}

			.fenleiItemTv {
				width: 100%;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #E8E8E8;
			}
		}
	}

	.baoKuanV {
		background: #1B2E1C;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 30rpx;
	}

	.tuijianTv {
		font-size: 34rpx;
		color: #E6A5B4;
	}

	.tuijianV {
		margin-top: 20rpx;
		height: 310rpx;
		width: 100%;
	}

	.tuijianItemV {
		width: 200rpx;
		height: 310rpx;
		display: inline-block;
		border-radius: 10rpx;
		margin-right: 15rpx;
		background-color: #383838;
	}

	.tuijianItemIv {
		width: 100%;
		height: 200rpx;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}

	.tuijianItemTv {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #F9F9F9;
		padding-left: 10rpx;
		padding-right: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tuijianMoneyV {
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.tuijianMoneyTv1 {
		font-size: 29rpx;
		font-family: DINPro-Medium, DINPro;
		font-weight: 500;
		color: #E6A5B4;
	}

	.tuijianMoneyTv2 {
		font-size: 24rpx;
		font-family: DINPro-Regular, DINPro;
		font-weight: 400;
		color: #939393;
		margin-left: 10rpx;
		text-decoration: line-through;
	}
</style>
